<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.min.js"></script>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <style type="text/css">
        body{
            background: black;
            color: aquamarine;
            font-size: 30px;
        }
        .edit {
            border: solid;
            border-width: 3px;
            border-radius: 5px;
            border-color: #f44336;
            font-size: 70px;
            padding: 5px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="vApp">
        <input type="text" v-model="msg" placeholder="输入字符反转" class="edit"> <br>
        {{reverse}}
        <button @click="modify('HelloWorld')">设置字符为HelloWorld</button>

        <hr>
        <button @click="alert()">我是来自computed的点击事件</button>
    </div>
</body>
<script>
    var vue=new Vue({
        el:'#vApp',
        data:{
            msg:''
        },
        //我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，
        // 只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
        //可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
        computed:{
            reverse:function () {
                return this.msg.split('').reverse().join('');
            },
            modify:{
                //getter
                get:function () {
                    return this.msg;
                },
                //setter
                set:function (val) {
                    this.msg=val;
                }
            },
            //如果这个方法写在computed里面，那么点击时只会执行一次
//            alert:function () {
//                alert('ok');
//            }
        },
        methods:{
            alert:function () {
                alert('ok');
            }
        }
    });
    <!--computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter-->
    vue.modify='HelloWorld';//可以用来外部设置初始值
</script>
</html>